<template>
  <div >
    <!-- onmousewheel="return false;" 取消鼠标滑轮 -->
    <div class="bott">
      <div class="b_l">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item v-for="(item,index) in list2"
                            :key="index"
                            class="sele2 list"
                            :title="list2[index].name"
                            @click="shishi(index)" />
        </van-sidebar>
      </div>
      <div class="b_r">
        <div class="over">
          <div class="first" v-if="list3.name == undefind">
            {{list2[0].name}}{{list2[0].description}}
          </div>
          <div class="first" v-else>
            {{list3.name}}{{list3.description}}
          </div>
          <div class="li"
               v-for="(item,index) in datas"
               :key="index">
            <img :src='"https://elm.cangdu.org/img/"+datas[index].image_path'
                 alt=""
                 @click="lit(index)">
            <div class="data">
              <div class="name">
                {{datas[index].name}}
              </div>
              <div class="description">
                {{datas[index].description}}
              </div>
              <div class="tips">
                月售{{datas[index].month_sales}}份
                好评率{{datas[index].satisfy_rate}}%
              </div>
              <div class="price">
                ￥{{datas[index].specfoods[0].price}}
              </div>
            </div>
            <div>
              <span class="model">
                <div class="jian"
                     @click="jian(index)">
                  -
                </div>
                <div class="num"
                     ref="number">0</div>
                <div class="jia"
                     @click="dianji(index)">
                  +
                </div>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foot">
      <div class="xdd" v-if="xddd">
        {{total.xd}}
      </div>
      <div class="left">
        <van-action-sheet v-model="show"
                          :overlay="flase"
                          title="购物车">
          <div class="content">
            <div class="gouwu"
                 v-for="(item,index) in gwc"
                 :key="index">
              <div class="all">
                <div class="gname">{{item.name}}</div>
                <div class="gprice">{{item.price}}</div>
                <div class="less">
                  <div class="jian"
                       @click="jian(index)">
                    -
                  </div>
                  <div class="num"
                       ref="number">{{item.num}}</div>
                  <div class="jia"
                       @click="dianji(index)">
                    +
                  </div>
                </div>
              </div>
            </div>
          </div>

        </van-action-sheet>
        <van-badge>
          <div class="child" />
          <div class="che"
               @click="show=true"
               :class="['che',{'che1':showmode} ]">
            <i class="iconfont icon-gouwuche"> </i>
          </div>
        </van-badge>
        <div class="qian">
          <div class="qian1">￥{{total.totala}}</div>
          <div class="qian2">{{tip}}</div>
        </div>
      </div>
      <div @click="song"
           :class="['right-shop1',{'right-shop':showright} ]">
        {{jiesuan}}
      </div>
    </div>
  </div>
</template>
<script>

import Vue from 'vue';
import { ActionSheet } from 'vant';
import { Badge } from 'vant';
import { Sidebar, SidebarItem } from 'vant';
Vue.use(Sidebar)
Vue.use(SidebarItem)
Vue.use(Badge)
Vue.use(ActionSheet);
// import Vue from 'vue';
// import { Sidebar, SidebarItem } from 'vant';
export default {
  name: 'shangpin',
  data () {
    return {
      show: false,
      gwc: [],
      activeKey: '0',
      list2: [],
      datas: [],
      tip: localStorage.getItem('tip'),
      shopid: JSON.parse(localStorage.getItem('shuju')),
      showmode: '',
      showright: '',
      jiesuan: '还差20元起送',
      les: '20',
      xddd: false,
      list3:[]
    }
  },
  computed: {
    total: function () {
      let totala = 0;
      let xd = 0;
      for (let i in this.gwc) {
        totala += this.gwc[i].price * this.gwc[i].num
        xd += this.gwc[i].num
      }
      return { totala, xd };
    },
  },
  methods: {
    shishi (index) {
      let a = JSON.parse(localStorage.getItem('shuju'))
     // console.log(a)
     //alert(JSON.parse(localStorage.getItem('shuju')))
      this.$axios.get(`https://elm.cangdu.org/shopping/v2/menu?restaurant_id=${a}`, {
      }).then(res => {
        // 获取对应的数据
        this.list2 = res
        this.datas = res[index].foods
        this.list3 = this.list2[index]
      })
    },
    song () {
      if (this.jiesuan == '去结算') {
        console.log("-----------------------------------------");
        this.$router.push({ name: 'Order' })
        localStorage.setItem('total', this.total.totala)
      } else {
        alert('请继续选购')
      }
    },
    order () {
      this.$router.push({ name: 'Order' });
    },
    dianji (index) {
      let name = this.datas[index].specfoods[0].name
      let price = this.datas[index].specfoods[0].price
      let object = {}
      //gwc数组·初始状态
      //console.log((this.$refs.number)[index].innerText)
      if (this.gwc.length == 0) {
        object.name = name
        object.price = price
        object.num = 1;
        (this.$refs.number)[index].innerText = 1
        this.gwc.push(object);
        localStorage.setItem('gwc', JSON.stringify(this.gwc))
      } else {
        let bool = false
        //遍历数组判断是否重复
        for (let x in this.gwc) {
          //如果名字存在单纯追加数量
          if (this.gwc[x].name == name) {
            this.gwc[x].num++;
            (this.$refs.number)[index].innerText = this.gwc[x].num
            localStorage.setItem('gwc', JSON.stringify(this.gwc))
            bool = true
            break
          }
        }
        if (bool == false) {
          object.name = name
          object.price = price
          object.num = 1
          this.gwc.push(object);
          (this.$refs.number)[index].innerText = object.num
          localStorage.setItem('gwc', JSON.stringify(this.gwc))

        }
      }
      //console.log(this.gwc)
      // console.log(this.total)
    },
    jian (index) {
      let name = this.datas[index].specfoods[0].name
      let num = (this.$refs.number)[index].innerText
      for (let x in this.gwc) {
        if (this.gwc[x].name == name) {
          if (num > 0) {
            this.gwc[x].num--;
            localStorage.setItem('gwc', JSON.stringify(this.gwc))

            if (this.gwc[x].num == 0) {
              this.gwc.splice(x, 1);

              (this.$refs.number)[index].innerText = 0
              localStorage.setItem('gwc', JSON.stringify(this.gwc))
            } else {
              (this.$refs.number)[index].innerText = this.gwc[x].num
              localStorage.setItem('gwc', JSON.stringify(this.gwc))

            }
            break
          }
        }
      }
      console.log('减少')
      console.log(this.gwc)
      //localStorage.setItem('dingdan', JSON.stringify(this.gwc))
    },
    lit (index) {
      alert(index)
      // console.log(this.datas[index])
      localStorage.setItem('abc', JSON.stringify(this.datas[index]))
      this.$router.push({ name: 'Shopshop' });
    }
  },
  created () {
    let a = JSON.parse(localStorage.getItem('shuju'))
    console.log(a)
    this.$axios.get(`https://elm.cangdu.org/shopping/v2/menu?restaurant_id=${a}`, {
    }).then(res => {
      // 获取对应的数据
      this.list2 = res
      this.datas = res[0].foods
      // console.log(res)
    })
  },
  watch: {
    'total.totala' () {
      if (this.total.totala > 0 && this.total.totala < 20) {
        let les = 20 - this.total.totala
        this.les = les
        // console.log(les)
      }
      if (this.total.totala == 0) {
        this.les = 20
      }
      if (this.total.totala > 0) {
        this.showmode = true
      }
      else {
        this.showmode = false
      }
      if (this.total.totala >= 20) {
        this.showright = true
        this.jiesuan = '去结算'
      }
      else {
        this.showright = false
        this.jiesuan = `还差${this.les}元起送`
      }
    },
    'total.xd' () {
      if (this.total.xd > 0) {
        this.xddd = true
      }else{
        this.xddd = false
      }
    }
  },
}
</script>
<style lang="less" >
.xdd {
  width: 18px;
  height: 18px;
  background-color: red;
  border-radius: 50%;
  z-index: 999;
  position: fixed;
  left: 60px;
  bottom: 63px;
  color: white;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
}
.gprice {
  color: red;
  font-weight: 700;
  margin-left: 130px;
}
.gname {
  width: 80px;
  color: #666;
  font-weight: 700;
  font-size: 19px;
}
.all {
  margin-top: 10px;
  width: 414px;
  display: flex;
  justify-content: space-between;
}
.less {
  display: flex;
}
.foot {
  width: 100%;
  height: 48px;
  background-color: rgb(61, 61, 63);
  z-index: 99;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  .left {
    width: 250px;
    height: 48px;
    display: flex;
    justify-content: space-around;
    .che {
      width: 55px;
      height: 55px;
      background-color: rgb(61, 61, 63);
      border-radius: 50%;
      position: fixed;
      bottom: 15px;
      left: 10px;
      border: 5px solid rgb(61, 61, 63);
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon-gouwuchekong {
        font-size: 33px;
        color: white;
      }
      .icon-gouwuche{
        color: white;
        font-size: 30px;
      }
    }
    .che1 {
      width: 55px;
      height: 55px;
      background-color: rgb(0, 146, 232);
      border-radius: 50%;
      position: fixed;
      bottom: 15px;
      left: 10px;
      border: 5px solid rgb(61, 61, 63);
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .qian {
      width: 120px;
      height: 48px;
      margin-left: 20px;
      text-align: center;
      .qian1 {
        font-size: 24px;
        color: white;
      }
      .qian2 {
        font-size: 13px;
        color: white;
      }
    }
  }
}

.content {
  padding: 16px 16px 160px;
}
.gouwu {
  display: flex;
}
.description {
  color: #999;
  font-size: 12.9px;
  margin-top: 5px;
}
.tips {
  font-size: 12.9px;
  color: 333;
  margin: 10px 0;
}

.data {
  margin-left: 10px;
}

.model {
  color: white;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 5px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
}

.name {
  font-size: 19px;
  // font-weight: 900;
  color: #333;
}

.price {
  color: #f60;
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0;
}

img {
  width: 51.75px;
  height: 51.75px;
}

.li {
  padding: 10px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  position: relative;
  // justify-content: space-between;
  //width: 300px;
  background-color: white;
  border-bottom: 1px solid #f8f8f8;
}
.ding {
  width: 300px;
}
.jia {
  width: 20px;
  height: 20px;
  background-color: blue;
  border-radius: 50%;
  color: white;
  text-align: center;
  font-size: 18px;
  margin-right: 10px;
}
.jian {
  width: 19px;
  height: 19px;
  background-color: white;
  border: 1px solid blue;
  border-radius: 50%;
  color: blue;
  text-align: center;
  font-size: 18px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.num {
  width: 30px;
  height: 20px;
  text-align: center;
  color: black;
}
.content {
  padding: 16px 16px 160px;
  z-index: 20;
}
.s_title {
  font-size: 15px;
  color: #ccc;
  font-weight: 500;
}
.b_r li {
  background-color: white;
}
.b_r ul {
  overflow: hidden;
}
.b_r {
  height: 100%;
  position: absolute;
  left: 80px;
  overflow-y: scroll;
  // z-index: -10;
}
.b_l {
  width: 80px;
  background-color: #f5f5f5;
  height: 100%;
  position: absolute;

  overflow-y: scroll;
  margin: 0;
}
.for {
  display: flex;
}
.first {
  height: 55.7px;
  width: 290px;
  background-color: #f5f5f5;
  color: #666;
  font-weight: 700;
  font-size: 20px;
  box-sizing: border-box;
  padding: 15px 10px;
}
.bott {
  overflow: hidden;
}
.van-sidebar-item--select::before {
  height: 100% !important;
  background-color: #3190e8 !important;
}
.list {
  width: 98px;
  height: 72px;
}
.select {
  border-bottom: 4px solid #3190e8;
  // padding-bottom: 5px;

  // box-sizing: border-box;
}
.ul_1 {
  display: flex;
  text-align: center;
  box-sizing: border-box;
  padding-top: 15px;
  justify-content: space-around;
}
.mid {
  width: 100%;
  height: 59.2px;
  font-size: 17px;
  background-color: white;
}
.top {
  //padding: 10px 0;
  width: 375px;
  background-color: rgba(119, 103, 137, 0.43);
  box-sizing: border-box;
  .t1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    img {
      width: 75px;
      border-radius: 0.15rem;
    }
    .ti_text {
      width: 280px;
      margin-left: 10px;
      h3 {
        color: #fff;
        font-weight: 700;
        margin-bottom: 0.3rem;
      }
      ._center {
        font-size: 0.5rem;
        color: #fff;
        margin-bottom: 0.3rem;
      }
      ._bottom {
        font-size: 0.5rem;
        color: #fff;
        width: 100%;
        overflow: scroll;
      }
    }
  }
  .t2 {
    box-sizing: border-box;
    padding: 5px 0;
    .jian {
      background-color: rgb(240, 115, 115);
      border-color: rgb(240, 115, 115);
      font-size: 0.8rem;
    }
    .msg {
      color: #fff;
      font-size: 0.5rem;
    }
  }
}
.right-shop {
  width: 120px;
  height: 48px;
  color: white;
  font-size: 18px;
  background-color: rgb(0, 220, 110) !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.right-shop1 {
  width: 120px;
  height: 48px;
  color: white;
  font-size: 18px;
  background-color: rgb(83, 83, 86);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

